import './disputeThumbnail.css'

import { Timeline, Tag, Tooltip } from 'antd'
import { fillValueHelper } from '@/utils/common'
import { selectedDisputeThumbnailAtom } from '@/app/atoms'
import { useAtom, useAtomValue } from 'jotai'
import { useState, useRef } from 'react'
import { arrayHelper } from '@/utils/common'

function Thumbnail ({
    date,
    title,
    tag,
    content,
}) {
    return (
        <div className='my-1'>
            <div className='flex items-center'>
               <div>
                    <span>{fillValueHelper(date)}</span>
               </div>
               <Tooltip title={fillValueHelper(title)} color='#34b7b9'>
                    <div className='ml-1 max-w-[96px] line-clamp-1'>
                            <span>{fillValueHelper(title)}</span>
                    </div>
               </Tooltip>
               <div className='flex-1' />
               <div>
                    {tag === 'police_case'
                        ? (
                            <Tag
                                style={{ 
                                    color: '#7f7f7f',
                                    borderColor: '#7f7f7f',
                                }}
                            >
                                110警情
                            </Tag>
                        )
                        : null
                    }
                    {tag === 'joint_investigation'
                        ? (
                            <Tag 
                                style={{ 
                                    color: '#a30014bf',
                                    borderColor: '#a30014bf',
                                }}
                            >
                                协同办案
                            </Tag>
                        )
                        : null
                    }
               </div>
            </div>
            <div className='mt-1 line-clamp-2'>
                <span>
                    {fillValueHelper(content)}
                </span>
            </div>
        </div>
    )
}

function ThumbnailWrap ({id, type, nodeType, isClicked, ...detail }) {

    const [_, setSelectedDisputeThumbnailAtom] = useAtom(selectedDisputeThumbnailAtom)
    const thumbnailWrapRef = useRef()

    const handleClickThumbnail = () => {
        setSelectedDisputeThumbnailAtom(() => ({ id, nodeType }))
    }

    if (isClicked && thumbnailWrapRef.current) {
        thumbnailWrapRef.current.scrollIntoView({ behavior: "smooth", block: "nearest"})
    } 

    return (
        <div
            className={`text-xs cursor-pointer p-1 w-[320px] rounded-md hover:bg-hightLight ${isClicked ? 'bg-selected' : ''}`}
            onClick={handleClickThumbnail}
            ref={thumbnailWrapRef}
        >
            {
                type === '1'
                    ? (
                        <Thumbnail {...detail} />
                    )
                    : null
            }
            {
                type === '2'
                    ? (
                        <div>
                            <div className='flex justify-between'>
                                <div>
                                    <span>{detail?.name}</span>
                                </div>
                                <Tooltip title={arrayHelper(detail?.relationList).join('、')} color='#34b7b9'>
                                    <div className='mr-2 line-clamp-1 max-w-[96px]' >
                                        <span>{arrayHelper(detail?.relationList).join('、')}</span>
                                    </div>
                                </Tooltip>
                            </div>
                            {arrayHelper(detail?.content).map((item, index) => {
                                return (
                                    <Thumbnail {...item} key={index}/>
                                )
                            })}
                        </div>
                    )
                    : null
            }
        </div>
    )
}

export default function DisputeThumbnail ({ list, type }) {

    const selectedNode = useAtomValue(selectedDisputeThumbnailAtom)

    const renderList = arrayHelper(list).map((item) => {
        return {
            ...item,
            isClicked: selectedNode?.id === item?.id,
            type,
        }
    })

    return (
        <Timeline
            id='dispute-thumbnail'
            items={renderList.map((item) => {
                return {
                    children: (<ThumbnailWrap {...item} />)
                }
            })}
        />
    )
}